<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<head>
	<meta charset="UTF-8">
	<meta name="apple-mobile-web-capable" content="yes">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/voiceStyle.css">
</head>
<style>
	.lunul {
		list-style: none;
	}
	.lunBo{
		text-align: center;
		position: relative;
	}
	.lunBo .banner .item{
		display: none;
	}
	.lunBo .banner .item.active{
		display: block;
	}
	.lunBo .banner .item a{
		border: none;
	}
	.lunul{
		position: absolute;
		overflow: hidden;
		bottom: 10px;

	}
	.lunul li{
		float: left;
		width: 20px;
		font:bold 14px/20px "微软雅黑";
		background-color:#9BCD9B;
		color: #fff;
		text-align: center;
		cursor: default;
		border-radius: 15px;

	}
	.lunul li+li{
		margin-left: 10px;
	}
	.lunul li.active{
		background-color: #fff;
		color: red;
	}
	.xwcms {
		transition: all 3s;
		transform-origin: bottom;
	}
	.xwcms:hover {
		transform:rotateX(90deg);
	}
</style>

<script type="text/javascript"
		src="${pageContext.request.contextPath}/js/AudioRecorder.js"></script>
<script>

    var search_keyWord = "",fileName="",reviewUrl="",studentHomeworkId = "",hId = "",sId = "",row;
    var value = 0;
    var basePath = "https://5151px.com";
    $(function() {
        init();
        searchAction();
        bootstrapValidatorInit();
    })

    function init() {

        if (store.get('userRole') == "2") {
            $("#teacherSearch").val(store.get('userRealName'));
            $("#teacherSearch").attr("disabled", "disabled");
            searchTeacherCourse(store.get('userId'));
        }else{
            searchCourse("#lessonNameSearch");
		}
        dataListInit();
    }
    // 搜索动作
    function searchAction() {
        $('#search_button').click(function() {
            search_keyWord = $('#search_input').val();
            tableRefresh();
        })
    }

    //搜索课程列表
    function searchCourse(courseName){
        $.ajax({
            url:"/onlineEdu/lesson/getLessonGroup",
            type: 'GET',
            cache: false,
            data:{},
            dataType:  "json",
            async:false,
            success: function (data) {
                var options = '<option value="">--请选择--</option>'+data.lessonGroup;
                $(courseName).html(options);
            }
        });
    }

    function searchTeacherCourse(teacherName){
        $.ajax({
            url:"/onlineEdu/lesson/getTeacherLessonGroup",
            type: 'GET',
            cache: false,
            data:{
                teacherId:teacherName
            },
            dataType:  "json",
            async:false,
            success: function (data) {
                // var options = '<option value="">---</option>'+data.teacherLessonGroup;
                var options = data.teacherLessonGroup;
                $("#lessonNameSearch").html(options);
            }
        });
    }

    // 分页查询参数
    function queryParams(params) {

        var temp = {
            limit : params.limit,
            offset : params.offset,
            lessonName :$('#lessonNameSearch').val(),
            lessonClass:$('#classSearch').val(),
            studentName:$('#studentSearch').val(),
            teacherName:$('#teacherSearch').val(),
            reviewStatus:$('#reviewSearch').val(),
            lessonStartTime:$('#startHour').val()+":"+$('#startMin').val(),

        }
        return temp;
    }

    // 表格初始化
    function dataListInit() {
        $('#dataList').bootstrapTable(
            {
                columns : [{
                    align: 'center'
                }, {
                    title: 'ID',
                    formatter: function (value, row, index) {
                        return index+1;
                    },
                    align: "center"
                },  {
                        field : 'student_name',
                        title : '学生姓名'
                    },
                    {
                        field : 'lesson_name',
                        title : '课程名称'
                    },
                    {
                        field : 'lesson_class',
                        title : '年级'
                    },
                    {
                        field : 'teacher_name',
                        title : '上课教师'
                    },
                    {
                        field : 'homework_subject',
                        title : '作业描述'
                    },
                    {
                        field : 'create_time',
                        title : '提交时间'
                    },
                    {
                        field : 'score',
                        title : '得分',
                        formatter :function (value,row) {
                            if(value==""){
                                return '<font color="red">未评阅</font>';
                            }else{
                                return value;
                            }
                        }
                    },
                    {
                        field : 'operation',
                        title : '操作',
                        width: 160,
                        align: 'center',
                        valign: 'middle',
                        formatter : function(value, row, index) {
                            var a = '<button class="btn btn-info btn-sm view"><span>评阅</span></button>';
                            var b = '<button class="btn btn-info btn-sm evl"><span>评价</span></button>';
                            var c = '<button class="btn btn-danger btn-sm del"><span>删除</span></button>';
                            return a+" "+b+" "+c;
                        },
                        events : {
                            // 操作列中编辑按钮的动作
                            'click .view' : function(e, value, row, index) {
                                if (store.get('userRole') == "2") {
                                    rowEditOperation(row.student_homework_id, row.homework_id, row.student_id);
                                }else{
                                    alert("无权限");
                                }
                            },
                            'click .evl' : function(e, value, row, index) {
								if (store.get('userRole') == "2") {
                                    evlOperation(row);
                                }else{
                                    alert("无权限");
                                }
                            },
                            'click .del' : function(e, value, row, index) {
                                if (store.get('userRole') == "0") {
                                    studentHomeworkId = row.student_homework_id;
                                    $('#deleteWarning_modal').modal("show");
                                }else{
                                    alert("请联系管理员删除！");
                                }
                            }
                        }
                    } ],
                url : '/onlineEdu/homework/getStudentHomeWorkByPage',
                onLoadError:function(status){
                    handleAjaxError(status);
                },
                method : 'GET',
                queryParams : queryParams,
                sidePagination : "server",
                dataType : 'json',
                pagination : true,
                pageNumber : 1,
                pageSize: 10,
                pageList : [5, 10, 25, 50, 100 ]
            });
    }

    // 表格刷新
    function tableRefresh() {
        $('#dataList').bootstrapTable('refresh', {
            query : {}
        });
    }
    // 行编辑操作
    function rowEditOperation(id,homeworkId,studentId) {

        hId = homeworkId;
        sId = studentId;
        $('#view_modal').modal("show");
        var datas = null;
        $.ajax({
            type : "GET",
            url :"/onlineEdu/homework/studentHomeworkUrl",
            dataType : "json",
            data : {homeworkId:homeworkId,studentId:studentId},
            success : function(response) {
				datas = response.homeworkUrls;
				showHomeWork(datas,id);
            },
            error : function(xhr, textStatus, errorThrown) {
                $('#view_modal').modal("hide");
                alert("获取图片失败!");
                handleAjaxError(xhr.status);
            }
        })
    }

    function evlOperation(rows){

        $('#evl_modal').modal("show");
        row = rows;
	}

    function showHomeWork(datas,id){

        studentHomeworkId = id;
        var banner = document.getElementById("banner");
        var list = document.getElementById("list");
        $("#banner").empty();
        $("#list").empty();
        for(var i = 0,len = datas.length;i<len;i++){
            var div = document.createElement("div");
            var li = document.createElement("li");
            if(i==0){  //默认第一项轮播项显示  对应的控制按钮被选中
                div.className = "item active";
                li.className = "active";
            }else{ //其他项隐藏  其他的控制按钮样式不改变
                div.className = "item";
                li.className = "";
            }
            div.innerHTML = '<a target="_blank" href="' + basePath+datas[i].homework_url + '">' +
                '<img id="images1" width="450px" height="350px" src="' + basePath+datas[i].homework_url + '"/>' +
                '</a>';
            li.innerHTML = i + 1;
            banner.appendChild(div);
            list.appendChild(li);

        }

        var lunBo = document.getElementById("lunBo");
        var items = document.querySelectorAll("#lunBo #banner .item");
        var lis = document.querySelectorAll("#lunBo #list li");
        var currentIndex = 0;//(控制按钮和轮播项共同的索引)
        for(var i = 0,len = lis.length;i<len;i++){
            lis[i].index = i;
            lis[i].onmouseenter = function(){
                currentIndex = this.index;
                for(var j = 0;j<len;j++){
                    lis[j].className = "";
                    items[j].className = "item";
                }
                this.className = "active";
                items[this.index].className = "item active";
            }
        }

        var termId;
        function autoPlay(){
            termId = setInterval(function(){
                currentIndex++;
                if(currentIndex==lis.length){
                    currentIndex = 0;
                }
                //lis[currentIndex].onmouseenter();
            },4000);
        }
        autoPlay();
        //鼠标进入停止轮播
        lunBo.onmouseenter = function(){
            clearInterval(termId);
        }
        //鼠标离开继续轮播
        lunBo.onmouseleave = function(){
            autoPlay();
        }
        $("#images1").rotate({
            bind:
                {
                    mouseover: function(){
                        value +=0;
                        $(this).rotate({ animateTo:value})
                    }
                }
        });
	}

//    $("#images1").rotate({
//        bind:
//            {
//                mouseover: function(){
//                    value +=90;
//                    $(this).rotate({ animateTo:value})
//                }
//            }
//    });
    $('#button').click(function(){

        $("#images1").rotate(90);
    });

    $('#modal_submit').click(function() {

            var homeworkUrl = fileName.replace("undefined","");
            var data = {
                studentHomeworkId:studentHomeworkId,
                homeworkId:hId,
                studentId:sId,
                score:$('#score').val(),
                reviewUrl: reviewUrl,
                comment:$('#comment').val(),
                homeworkUrl:homeworkUrl.substring(0,fileName.length-1)
            }
            if (!(data.score)) {
                alert("请填写分数！");
                return;
            }

            $.ajax({
                type: "POST",
                url: "/onlineEdu/homework/review",
                dataType: "json",
                data: data,
                success: function (response) {
                    studentHomeworkId = null;
                    $('#view_modal').modal("hide");
                    var msg;
                    var type;
                    var append = '';
                    if (response.success) {
                        type = "success";
                        msg = "操作成功";
                        data = null;
                        tableRefresh();
                    } else {
                        type = "error";
                        msg = "失败";
                    }
                    showMsg(type, msg, append);
                    $('#score').val("");
                    $('#comment').val("");
                    fileName = "";
                    reviewUrl = "";
                },
                error: function (xhr, textStatus, errorThrown) {
                    $('#view_modal').modal("hide");
                    // handle error
                    handleAjaxError(xhr.status);
                }
            })
    })

    $('#evl_submit').click(function() {

        var datas = {
            content:$("#content").val(),
            teacherName:row.teacher_name,
            studentName:row.student_name,
            lessonName:row.lesson_name
        };
        $.ajax({
            type : "POST",
            url :"/onlineEdu/student/evaluate",
            dataType : "json",
            data :datas,
            success : function(response) {
                $('#evl_modal').modal("hide");
            },
            error : function(xhr, textStatus, errorThrown) {
                $('#evl_modal').modal("hide");
                handleAjaxError(xhr.status);
            }
        })
    })

    function uploadVoice(blob) {
        var uploading = false;
        var form = new FormData();
        form.append("voice", blob);
        $.ajax({
            url:"https://5151px.com/onlineEdu/homework/teacherReviewVoice",
            type: 'POST',
            cache: false,
            data:form,
            processData: false,
            contentType: false,
            dataType:  "json",
            beforeSend: function () {
                uploading = true;
            },
            success: function (data) {
                reviewUrl = data.fileName;
                alert("上传成功!");
                uploading = false;
            }
        });
    }

    $('#delete_confirm').click(function() {

        $.ajax({
            type : "GET",
            url :"/onlineEdu/homework/deleteHomeWork",
            dataType : "json",
            data : {studentHomeworkId:studentHomeworkId},
            success : function(response) {
                $('#deleteWarning_modal').modal("hide");
                var msg;
                var type;
                var append = '';
                if (response.result == "success") {
                    type = "success";
                    msg = "删除成功";
                } else if (response.result == "error") {
                    type = "error";
                    msg = "删除失败";
                }
                showMsg(type, msg, msg);
                tableRefresh();
            },
            error : function(xhr, textStatus, errorThrown) {
                $('#deleteWarning_modal').modal("hide");
                handleAjaxError(xhr.status);
            }
        })
    });

    var uploading = false;
    function uploadFile(file, fileID) {
        if (uploading) {
            alert("文件正在上传中，请稍候");
            return false;
        }
        var form_data = new FormData();
        var file_data = $("#"+fileID).prop("files")[0];
        form_data.append("file",file_data);
        $.ajax({
            url:"/onlineEdu/homework/reviewedHomeWorkUpload",
            type: 'POST',
            cache: false,
            data:form_data,
            processData: false,
            contentType: false,
            dataType:  "json",
            beforeSend: function () {
                uploading = true;
            },
            success: function (data) {
                fileName += data.fileName+",";
                alert("上传成功"+fileName);
                uploading = false;
            }
        });
    }
</script>
<div class="panel panel-default">
	<ol class="breadcrumb">
		<li><label class="form-label">学生作业信息</label></li>
	</ol>
	<div class="panel-body">
		<div class="row">
			<div style="width: 100%;margin-top: -16px" class="box-content">
				<table id="信息查询" class="table table-bordered table-hover table-responsive">
					<tbody>
					<tr style="display: none">
						<td class="item-title" align="center">上课教师</td>
						<td class="item-content-half">
							<input type="text" class="form-control" id="teacherSearch" placeholder="">
						</td>
					</tr>
					<tr>
						<td class="item-title" align="center">学生姓名</td>
						<td class="item-content-half">
							<input type="text" class="form-control" id="studentSearch" placeholder="">
						</td>
						<td class="item-title" align="center">课程名称</td>
						<td class="item-content-half">
							<%--<input type="text" class="form-control" id="lessonNameSearch" placeholder="">--%>
                            <select id="lessonNameSearch" class="form-control">
                            </select>
						</td>
                        <td class="item-title" align="center">年级</td>
                        <td class="item-content-half">
                            <%--<input type="text" class="form-control" id="classSearch" placeholder="">--%>
                            <select id="classSearch" class="form-control">
                                <option value="">--请选择--</option>
								<option value="小班">小班</option>
								<option value="小升中">小升中</option>
								<option value="中班">中班</option>
								<option value="中升大">中升大</option>
								<option value="大班">大班</option>
								<option value="大升一">大升一</option>
								<option value="一年级">一年级</option>
								<option value="一升二">一升二</option>
								<option value="二年级">二年级</option>
								<option value="二升三">二升三</option>
								<option value="三年级">三年级</option>
								<option value="三升四">三升四</option>
								<option value="四年级">四年级</option>
								<option value="四升五">四升五</option>
								<option value="五年级">五年级</option>
								<option value="小升初">小升初</option>
                            </select>
                        </td>
						<td class="item-title" align="center">批阅状态</td>
						<td class="item-content-half">
							<%--<input type="text" class="form-control" id="classSearch" placeholder="">--%>
							<select id="reviewSearch" class="form-control">
								<option value="">--请选择--</option>
								<option value="1">已批阅</option>
								<option value="0">未批阅</option>
							</select>
						</td>
						<td class="item-title" align="center">上课时间</td>
						<td class="item-content-half">
                                <input type="text" style="width: 50px;display: inline-block"
                                       class="form-control" id="startHour" placeholder="17"> :
                                <input type="text" style="width: 50px;display: inline-block"
                                       class="form-control" id="startMin" placeholder="00">
                                <%--<input type="text" style="width: 50px;display: inline-block"--%>
                                       <%--class="form-control" id="endHour" placeholder="19"> :--%>
                                <%--<input type="text" style="width: 50px;display: inline-block"--%>
                                       <%--class="form-control" id="endMin" placeholder="30">--%>
						</td>
					</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div style="text-align: right">
			<button id="search_button" style="text-align: right" class="btn btn-success">
				<span class="glyphicon glyphicon-search"></span> <span>查询</span>
			</button>
		</div>
	</div>
	<div class="row" style="margin-top: 15px">
		<div class="col-md-12">
			<table id="dataList" class="table table-striped"></table>
		</div>
	</div>
</div>
</div>

<!-- 评阅作业模态框 -->
<div id="view_modal" class="modal fade" table-index="-1" role="dialog"
	 aria-labelledby="myModalLabel" aria-hidden="true"
	 data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content" style="width: 507px">
			<div class="modal-header" style="padding: 6px">
				<button class="close" type="button" data-dismiss="modal"
						aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="titleLablea">浏览作业</h4>
			</div>
			<div class="modal-body">
				<!-- 模态框的内容 -->
				<div class="lunBo" id="lunBo">
					<div class="banner" id="banner">
					</div>
					<ul class="lunul" id="list">
					</ul>
				</div>
				<button class="btn btn-success" style="margin-left: 8px" id='button'>旋转图片</button>
				<div class="row">
					<div class="col-md-1 col-sm-1"></div>
					<div class="col-md-8 col-sm-8">
						<form class="form-horizontal" role="form" id="student_form"
							  style="margin-top: 15px">
							<div class="form-group">
								<label style="margin-left: -211px;"> <span>上传作业：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<form style="margin-left: 100px" id = "fileForm" method="post" enctype="multipart/form-data">
										<input style="margin-left:74px;" type="file" name="file" id="submitFile" onchange="uploadFile(this, this.id)">
									</form>
								</div>
							</div>
							<div class="form-group">
								<label style="margin-left: 0px"> <span>分数：</span>
								</label>
								<div style="display: inline-block">
									<input type="text" style="width:439px" class="form-control" id="score"
										   placeholder="分数(百分制)">
								</div>
							</div>
							<div class="form-group">
								<label style="margin-left: 0px"> <span>评语：</span>
								</label>
								<div style="display: inline-block">
									<textarea type="text" style="height:50px;width:439px" class="form-control" id="comment"
										   placeholder="评语(选填)"></textarea>
								</div>
							</div>
						</form>
					</div>
				</div>
				<div id="container" style="margin-left: 10px">
					<div id="player">
						<span>语音评阅：</span>
						<br>
						<button id="btn-start-recording">开始录音</button>
						<button id="btn-stop-recording" disabled>停止录音</button>
						<hr>
						<audio controls autoplay></audio>
					</div>
				</div>
				<div class="modal-footer" style="padding: 6px;">
					<button class="btn btn-default" type="button" data-dismiss="modal" id="modal_cancel">
						<span>取消</span>
					</button>
					<button class="btn btn-success" type="button" id="modal_submit">
						<span>提交</span>
					</button>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 删除提示模态框 -->
<div class="modal fade" id="deleteWarning_modal" table-index="-1"
	 role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" type="button" data-dismiss="modal"
						aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabelee">警告</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-md-3 col-sm-3" style="text-align: center;">
						<img src="" alt=""
							 style="width: 70px; height: 70px; margin-top: 20px;">
					</div>
					<div class="col-md-8 col-sm-8">
						<h3>是否确认删除该条记录</h3>
						<p></p>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button class="btn btn-default" type="button" data-dismiss="modal">
					<span>取消</span>
				</button>
				<button class="btn btn-danger" type="button" id="delete_confirm">
					<span>确认删除</span>
				</button>
			</div>
		</div>
	</div>
</div>
<!-- 评价模态框 -->
<div id="evl_modal" class="modal fade" table-index="-1" role="dialog"
	 aria-labelledby="myModalLabel" aria-hidden="true"
	 data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content" style="width: 400px">
			<div class="modal-header" style="padding: 6px">
				<button class="close" type="button" data-dismiss="modal"
						aria-hidden="true">&times;</button>
				<h4 class="modal-title" >评价学生</h4>
			</div>
			<div class="modal-body">
				<!-- 模态框的内容 -->
				<div class="row">
					<div class="col-md-8 col-sm-8">
						<form class="form-horizontal" role="form" id="evl_form"
							  style="margin-left:35px;margin-top: 5px;">
							<div class="form-group">
								<label style="margin-left: 0px"> <span>评价内容：</span>
								</label>
								<div style="display: inline-block;text-align: center">
									<textarea type="text" style="height:150px;width:330px" class="form-control" id="content"
											  placeholder="评价内容(100字内)"></textarea>
								</div>
							</div>
						</form>
					</div>
				</div>
				<div class="modal-footer" style="padding: 6px;">
					<button class="btn btn-default" type="button" data-dismiss="modal" id="evl_cancel">
						<span>取消</span>
					</button>
					<button class="btn btn-success" type="button" id="evl_submit">
						<span>提交</span>
					</button>
				</div>
			</div>
		</div>
	</div>
</div>